<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>沐芃科技</title>
    <link rel="stylesheet" type="text/css" href="../../css/public.css" />
    <style>
        #content {
		width: 100%;
		height: 100vh;
		background-color: #FFF;
	}

	.topHead {
		width: 90%;
		margin: 20px auto;
		height: 85px;
        background: url('../../image/img/account/banner.png') no-repeat center;
        background-size:100%;
        
	}

	.topHead img {
		width: 100%;
		height: 100%;
	}

	.center {
		width: 90%;
		margin: 10px auto;
		height: 680px;
	}

	.topAlign {
		width: 55%;
		height: 30px;
		line-height: 30px;
		margin-bottom: 10px;
	}

	.oneP {
		font-size: 13px;
		color: #A2A0B2;
	}

	.twoP {
		font-size: 16px;
		color: #333333;
		border-bottom: 2px solid #FD8DBE;
	}

	.oneShow {
		width: 100%;
		height: 650px;
	}

	.topOn {
		width: 100%;
		height: 220px;
	}

	.center_box_one {
		width: 100%;
		height: 70px;
		margin-bottom: 5px;
        display: flex;
        flex-wrap:wrap
	}

	.center_box_one .one {
		width: 31%;
		height: 70px;
		border: 1px solid #EEEEEE;
		border-radius: 5px;
		position: relative;
        margin-bottom: 5px;
	}
    .center_box_one .tixianon{
        border: 1px solid #f672b1;
    }

	.center_box_one .one img {
		width: 90%;
		height: 15px;
		position: absolute;
		left: 0;
		top: 0;
	}

	.center_box_one .one .txt {
		position: absolute;
		left: 0;
		top: 0;
		color: #FFF;
		font-size: 10px;
	}


	.center_box_one .one .bott1 {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0px;
		color: #C9C9C9;
	}
    .center_box_one .tixianon .bott1 {
    color: #f672b1;
    }
	.center_box_one .one .bott div {
		color: #7D64FE;
		font-size: 13px;
	}


	.payBox {
		width: 100%;
		margin: 20px auto;
		height: 75px;
	}

	.payBot {
		width: 100%;
		height: 45px;
		margin-top: 10px;
		line-height: 45px;
	}

	.payBotOne {
		width: calc(100% - 20px);
		height: 100%;
		background-color: #F8F8F8;
		padding: 0 10px;
	}

	.payBotOne .left {
		width: 70%;
		height: 100%;
		color: #000;
	}

	.payBotOne .left img {
		width: 30px;
		height: 30px;
		margin-right: 20px;
	}

	.checkCricle {
		font-size: 13px;
		color: #C6C4C9;
	}

	.activeCricle {
		width: 10px;
		height: 10px;
		border: 1px solid #816EFB;
		border-radius: 50%;
		background-color: #816EFB;
	}


	.bottBox {
		width: 100%;
		height: 160px;
		margin: 10px auto 0px;
	}

	.bottBoxList {
		margin-top: 10px;
		height: 120px;
		color: #918E94;
		font-size: 11px;
		width: 100%;
	}

	.button {
		background: linear-gradient(90deg, #BCB4FF 0%, #816EFB 100%);
		border-radius: 25px;
		margin: 30px auto 0;
		text-align: center;
		color: #FFF;
		font-weight: bold;
		padding: 15px 110px;
	}

	.button_before {
		/* width: 280px;
		height: 50px; */
		background: #D3D0D7;
		border-radius: 25px;
		margin: 30px auto 0;
		text-align: center;
		/* line-height: 50px; */
		color: #FFF;
		font-weight: bold;
		padding: 15px 110px;
	}
.on{
    background-color: #f672b1;
}
	.twoShow {
		width: 100%;
		height: 260px;
	}

	.money {
		width: calc(100% - 30px);
		height: 45px;
		padding: 15px;
		margin-bottom: 20px;
	}

	.money input {
		width: 75%;
		height: 45px;
	}

	.btn {
		background: #D3D0D7;
		border-radius: 25px;
		margin: 80px auto 0;
		text-align: center;
		color: #FFF;
		font-weight: bold;
		padding: 15px 110px;
	}

	.getSome {
		font-size: 13px;
		color: #333333;
		padding-left: 15px;
		width: calc(100% - 15px);
	}
    .wdey{width: 70%;padding-left: 20px;padding-top: 28px; font-size: 13px; color: #FFF;}
    .wdey span{padding-left: 10px;font-size: 22px;}
	.onbtn{background-color: #816EFB;}
    </style>
</head>

<body>
    <div id="view" v-cloak>
        <div id="content">
			<div class="topHead">
				<div class="wdey" >收益余额<span>{{myMoney}}</span></div>
			</div>

			<div class="center flex_column">
				<div class="topAlign flex_between">
					<p v-if="current==0" class="twoP" @click="change">收益提现 </p>
                    <p v-else class="oneP" @click="change">收益提现</p>
					<p v-if="current==1" class="twoP" @click="changeTwo">兑换钻石</p>
                    <p v-else class="oneP" @click="changeTwo">兑换钻石</p>
				</div>

				<!-- 用于选择切换 -->
				<!-- 收益提现 -->
				<div class="oneShow flex_column" v-if="current==0">
					<div class="topOn flex_column">
						<div class="center_box_one flex_around">
							<div class="one" v-for="(m, index) in jfffList" @click="tixiand(index)" :class="{'tixianon':tixiandj==index}">
								<div class="bott1 flex_column_center">

									<p>{{m.money}}元</p>
									<p style="font-size: 10px;">{{m.price}}积分</p>

								</div>
							</div>
							
						</div>


						

						

					</div>

					<!-- 收款账号 -->
					<div class="payBox flex_column" @click="_url({ url: 'frame4/set_paya', title: escape_a})">
						<p style="font-size: 13px;color: #A2A0B2;">收款账号</p>
						<div class="payBot">
							<div class="payBotOne flex_between">
								<div class="left flex">
									<img src="../../image/img/account/zfb.png" alt="">
									<div class="txt">支付宝账号</div>
								</div>
                                <div class="checkCricle" v-if="ffInfo.zhifucount">
									{{ffInfo.zhifucount}} >
								</div>
								<div class="checkCricle" v-else>
									请绑定账号 >
								</div>
							</div>
						</div>
					</div>

					<!-- 提现说明 -->
					<div class="bottBox flex_column">
						<p style="font-size: 13px; color: #333333;">提现说明</p>
						<div class="bottBoxList flex_column_around">
							<div class="flex">
								<p>1、支付宝实名和支付宝账号需要对应，否则无法到账，</p></a>
							</div>
							<div class="flex">
								<p>
									2、100元以上(含)提现在72小时内到账(如遇周末，节假日 顺延)</p>

							</div>
							<div class="flex">
								<p>
									3、每日最多申请三次提现。
								</p>
							</div>
							<div class="flex">
								<p>
									4、若账号因违规被封号，钱包将被冻结</p>
							</div>
							<div class="flex">
								<p>
									5、每笔提现支付宝端会收取6%的手续费</p>
							</div>
						</div>
					</div>


					<div class="button_before" :class="{'on':tixiandj>=0}" onclick="tixian()">
						立即提现
					</div>
				</div>


				<!-- 兑换钻石 -->
				<div class="twoShow flex_column" v-if="current==1">
					<div class="money flex_between">
						<p style="font-size: 13px; color: #333333;">兑换积分:</p>
						<input type="number" v-bind:value="jifenvalue" v-on:input="valueChange" placeholder="请输入要兑换的积分">
					</div>

					<p class="getSome">获得钻石：{{zuanvalue}}</p>

					<div class="btn" :class="{'onbtn':btn}" onclick="duihuan()">
						立即兑换
					</div>
				</div>
			</div>






		</div>
















        <!-- <ul class="shouyi-ul">
            <li class="list">
                <div class="flex">
                    <img src="../../image/icon/jifen.png" alt="">
                    <span>积分余额</span>
                </div>
                <span class="price"><b>{{myMoney}}</b>积分</span>
            </li>
            <li class="list">
                <div class="flex">
                    <img src="../../image/icon/qianbao.png" alt="">
                    <span>最多可提现</span>
                </div>
                <span class="price"><b>{{(myMoney/rate).toFixed(2)}}</b>元</span>
            </li>
        </ul>
        <div class="flex-bt btn-wrap">
            <button class="btn btn1" onclick="tixian()">提现</button>
            <button class="btn btn2" onclick="_url({url:'shop/shop', title:'积分商城', moreTitle:'兑换记录'})">积分商城</button>
        </div>
        <p class="tip" @click="_url({ url: 'frame4/set_paya', title: escape_a})">修改{{escape_a}}</p>
        <p class="tip" onclick="_url({url:'about', id: 4, title:'提现说明'})">提现说明</p> -->
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/ffkj.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script>
    var view = new Vue({
        el: '#view',
        data: {
            imgurl: imgurl,
            ffList: [],
            ffInfo: {},
            myMoney: 0,
            rate: 1,
            escape_a: escape_a,
            current: 0,
            jfffList:[],
            tixiandj:-1,
			jifenvalue:'',
			zuanvalue:0,
			btn:false
        },
        methods: {

            change() {
				this.current = 0
				console.log(this.current);
			},
			changeTwo() {
				this.current = 1
				console.log(this.current);
			},
            _url(param, url) {
                _url(param, url);
            },
            // 返回图片路径
            returnImg(url) {
                return returnImg(url);
            },
            returnName(s, all) {
                return returnName(s, all);
            },
            tixiand(index){
                this.tixiandj=index
                console.log(index)
            },
			valueChange(e){
				console.log(e.target.value)
				
				
				if(!(/(^[1-9]\d*$)/.test(e.target.value))){
					_msg('请输入整数')
					this.btn=false
					return
				}
				if(parseInt(e.target.value)>parseInt(this.myMoney)){
					_msg('超过可用积分')
					this.btn=false
					return
				}
console.log(parseInt(this.myMoney))
this.jifenvalue=e.target.value
				this.zuanvalue=(e.target.value*this.rate).toFixed(2)
				this.btn=true
			}
        }
    })
    apiready = function() {
		view.jifenvalue=''
		view.btn=false
        // 提现/充值后 刷新用户余额
        _listener('money_get', function(ret) {
            getMyMoney();
        })

        // 刷新用户信息 重新获取提现信息
        _listener('pay_refresh', function() {
            getMyMoney();
        })
        _listener('viewappear', function() {
            getMyMoney();
        })

        getMyMoney();

        getRate();
        getData()
        getPageContent(11, function(data) {
            $api.html($api.dom('.rule'), data.body)
        })
    };

    // 获取余额
    function getMyMoney() {
        _getUser(function(ret) {
            view.ffInfo = ret.result;
            view.myMoney = ret.result.score;
        })

    }
    // 打开提现窗口
    function tixian() {
        if (view.ffInfo.is_identity_authentication != 2) {
            _alert('请先身份认证，再进行提现操作', function() {
                _url({
                    url: 'frame4/authentication_frame',
                    title: '身份认证'
                })
            }, '尚未身份认证');

            return;
        }
        // // 设置支付密码
        // if (!parseInt(view.ffInfo.paypwd)) {
        //     showDetail('frame4/paypwd');
        //     return;
        // }
        // 设置支付A
        if (!view.ffInfo.zhifucount) {
            if (!view.ffInfo.phone) {
                _url({
                    url: 'frame4/bang_ding_shou_ji_frm',
                    title: '绑定手机'
                })
            } else {
                _url({
                    url: 'frame4/set_paya',
                    title: '设置'+escape_a,
                    phone: view.ffInfo.phone
                })
            }
            return;
        }
        if(view.tixiandj<0){
            _msg('请先选择要提现的金额');
            return;
        }
var id=view.jfffList[view.tixiandj].id


        _loading();
                _ajax('home/withdraw/tiXian?id=' + id + '&method=1&userid=' + $api.getStorage('userid'), function(ret, err) {
                    _loadingClose();
                    if (ret && ret.code == 200) {
                        _msg('提现成功');
                        timerWin();
                    } else {
                        _msg(ret.msg);
                    }
                })
    }

    // 获取兑换比例
    function getRate() {
        _ajax('home/withdraw/rate', function(ret, err) {
            console.log(JSON.stringify(ret));
            console.log(JSON.stringify(err));
            if (ret && ret.code == 200) {
                view.rate = ret.data.rate;
            }
        })
    }

    function _more() {
        _url({
            url: 'frame4/shouru',
            title: '收支明细'
        }, 'frame4/shouru_win')
    }
    function getData() {
        _ajax('api/Withdraw/lists', function(ret, err) {
            if (ret && ret.code == 200) {
                view.jfffList = ret.data;
            }
        }, {
            user_id: $api.getStorage('userid'),
        })
    }
	function duihuan() {
		if(!view.btn){
			return
		}

        _ajax('home/withdraw/duihuan', function(ret, err) {
            console.log(JSON.stringify(ret));
            console.log(JSON.stringify(err));
			if (ret && ret.code == 200) {
				setTimeout(function() {
					window.location.reload()
				}, 2000)
				
			}
            _msg(ret.msg)
        }, {
            user_id: $api.getStorage('userid'),
			jifen:view.jifenvalue
        })
    }
</script>

</html>